<template>
  <div class="_3DPqg1sEeVKyZvQGiGR7MK">
    <div class="opW4K-r7eKwtlgiMzfCHm">
      <span class="ant-badge">
        <!-- 点赞 -->
        <div class="_1qU35tL8S-yk6hGSLgkF1n" @click="getGood(archivesListId)">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            :style="{ color: archivesListId.isply ? 'red' : '' }"
          >
            <path
              d="M859.8 191.2c-80.8-84.2-212-84.2-292.8 0L512 248.2l-55-57.2c-81-84.2-212-84.2-292.8 0-91 94.6-91 248.2 0 342.8L512 896l347.8-362C950.8 439.4 950.8 285.8 859.8 191.2z"
              fill="currentColor"
            ></path>
          </svg>
        </div>
        <sup
          class="
            ant-scroll-number
            ant-badge-count
            ant-badge-count-sm
            ant-badge-multiple-words
          "
          data-show="true"
          title="18"
          style="background-color: var(--primary-color)"
          ><span
            class="ant-scroll-number-only"
            style="transition: none 0s ease 0s"
            ><p class="ant-scroll-number-only-unit current">
              {{ archivesListId.likes }}
            </p></span
          ><span
            class="ant-scroll-number-only"
            style="transition: none 0s ease 0s"
            ><p class="ant-scroll-number-only-unit current">8</p></span
          ></sup
        >
      </span>
    </div>
    <!-- 评论 -->
    <div class="opW4K-r7eKwtlgiMzfCHm" @click="headleScroll()">
      <div class="oymssHUh0CsJHhRBTfMNy">
        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
        >
          <path
            d="M988.8 512a348.8 348.8 0 0 1-144.96 278.72v208.32l-187.84-131.52a387.2 387.2 0 0 1-56 4.8A408.64 408.64 0 0 1 384 811.84l-36.8-23.04a493.76 493.76 0 0 0 52.8 3.2 493.44 493.44 0 0 0 51.2-2.88c221.44-23.04 394.24-192 394.24-400a365.12 365.12 0 0 0-4.16-51.84 373.44 373.44 0 0 0-48.96-138.56l18.88 11.2A353.6 353.6 0 0 1 988.8 512z m-198.72-128c0-192-169.6-349.76-378.24-349.76h-24C192 47.04 33.92 198.72 33.92 384a334.08 334.08 0 0 0 118.4 253.12v187.52l86.08-60.48 66.24-46.4a396.16 396.16 0 0 0 107.52 16C620.48 734.08 790.08 576 790.08 384z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
    </div>
    <!-- 分享 -->
    <div class="opW4K-r7eKwtlgiMzfCHm" @click="shareArticle">
      <span
        ><div class="_2pkVHcLoLMRrby9QPbVsmv">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
          >
            <path
              d="M753.607 584.7c-48.519 0-91.596 23.298-118.66 59.315l-233.123-116.96c3.684-12.936 5.657-26.591 5.657-40.71 0-15.465-2.369-30.374-6.76-44.391l232.241-116.52c26.916 37.549 70.919 62.017 120.644 62.017 81.926 0 148.34-66.412 148.34-148.34 0-81.926-66.413-148.34-148.34-148.34-81.927 0-148.34 66.413-148.34 148.34 0 5.668 0.33 11.258 0.948 16.762l-244.945 122.892c-26.598-25.259-62.553-40.762-102.129-40.762-81.926 0-148.34 66.412-148.34 148.34s66.413 148.34 148.34 148.34c41.018 0 78.144-16.648 104.997-43.555l242.509 121.668c-0.904 6.621-1.382 13.374-1.382 20.242 0 81.927 66.412 148.34 148.34 148.34s148.34-66.413 148.34-148.34c-0.001-81.925-66.409-148.339-148.336-148.339l0 0z"
              fill="currentColor"
            ></path>
          </svg></div
      ></span>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import share from "@/components/share/index";
export default {
  props: ["archivesListId"],
  computed: {
    ...mapState({
      DetailHeight: (state) => state.archives.DetailHeight,
      ArchivesListId: (state) => state.archives.ArchivesListId,
    }),
  },
  methods: {
    getGood(archivesListId) {
      //点赞
      console.log("qqq.....", this.archivesListId);
      this.ArchivesLikes(archivesListId.id);
    },

    ...mapMutations({
      ArchivesLikes: "archives/ArchivesLikes",
    }),
    headleScroll() {
      // console.log(this.DetailHeight);
      //内容指定的高、第一个参数的x轴、第二个参数是y轴
      window.scrollTo(0, this.DetailHeight);
    },
    //点击分享
    shareArticle() {
      share(this.archivesListId);
    },
  },
};
</script>

<style scoped>
@media (max-width: 1024px) {
  ._3DPqg1sEeVKyZvQGiGR7MK {
    transform: translateY(-100%);
  }
}
@media (max-width: 800px) {
  ._3DPqg1sEeVKyZvQGiGR7MK {
    z-index: 10;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-right: 0;
    width: 100vw;
    height: 52px;
    background-color: var(--bg-second);
    border-top: 1px solid var(--border-color);
    transform: translate(0);
    transition: all 0.2s;
    display: flex;
    flex-wrap: nowrap;
  }
}
._3DPqg1sEeVKyZvQGiGR7MK {
  /* position: fixed;
  left:50px;
  top:300px; */
  margin-top: 15rem;
  margin-right: 30px;
  /* padding-right: 30px; */
}

@media (max-width: 1024px) {
  ._3DPqg1sEeVKyZvQGiGR7MK .opW4K-r7eKwtlgiMzfCHm {
    flex: 1;
  }
}
._3DPqg1sEeVKyZvQGiGR7MK .opW4K-r7eKwtlgiMzfCHm + .opW4K-r7eKwtlgiMzfCHm {
  margin-top: 1rem;
}
._3DPqg1sEeVKyZvQGiGR7MK .opW4K-r7eKwtlgiMzfCHm {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ant-badge {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  line-height: 1;
}
.el-dialog__body img {
  width: 285px;
  height: 190px;
}
.el-dialog__body p {
  text-align: center;
  line-height: 30px;
}

._1qU35tL8S-yk6hGSLgkF1n {
  width: 32px;
  height: 32px;
  font-size: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-second);
  color: var(--disable-text-color);
}
svg:not(:root) {
  overflow: hidden;
}
sup {
  background-color: var(--primary-color);
}
.ant-scroll-number {
  overflow: hidden;
}
.ant-badge-count,
.ant-badge-dot,
.ant-badge .ant-scroll-number-custom-component {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0;
}
.ant-badge-multiple-words {
  padding: 0 8px;
}
.ant-badge-count-sm {
  min-width: 14px;
  height: 14px;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
  border-radius: 7px;
}
.ant-badge-count {
  z-index: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  background: #ff4d4f;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff;
}
.oymssHUh0CsJHhRBTfMNy {
  width: 32px;
  height: 32px;
  font-size: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-second);
  color: var(--disable-text-color);
}
._2pkVHcLoLMRrby9QPbVsmv {
  width: 32px;
  height: 32px;
  font-size: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-second);
  color: var(--disable-text-color);
}
.opW4K-r7eKwtlgiMzfCHm svg:hover {
  color: var(--primary-color);
}
</style>
